<template>
  <div class="tree-select">
    <TreeItem
      v-for="item of treeData"
      :key="item.value"
      :tree-item-data="item"
      @update:tree-item-data="(e) => handleChildUpdate(e, index)"
    ></TreeItem>
  </div>
</template>

<script setup lang="ts">
import TreeItem from './TreeItem.vue'
import type { PropType } from 'vue'
import type { TreeSelectData } from '@/components/TreeSelect/index'
import { toRefs } from 'vue'

const emits = defineEmits(['update:treeData'])
const props = defineProps({
  treeData: {
    type: Array as PropType<TreeSelectData>,
    default: () => []
  }
})

const { treeData } = toRefs(props)

const handleChildUpdate = (item: TreeItemProps, index: number) => {
  treeData.value[index] = item
  emits('update:treeData', treeData.value)
}
</script>
